<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/utils.js?23"></script>
    <link rel="stylesheet" href="./css.css?4" type="text/css" />
    <title>Main</title>
</head>

<body>
    <div calo>
        <div class="top">
            <ul>
                <li @field="subjects|"></li>

            </ul>
            <p><button @Click="register">registration</button><a style="color: white;" href="./index.html">logout</a></p>
        </div>
        <div class="main">
            <div class="tree" ref="tree"></div>
            <div class="content" @Router>
                <h3 @field="title"></h3>
                <p @field="content"></p>

            </div>
        </div>
    </div>
    <script>
        whenready(function() {
            requireAll(['./js/calo.js?3'],
                function() {
                    makeCalo({
                        global:{
                            subjects: ['Clown'],
                            title: 'golang introduction',
                            content: 'golang is a very brief programming language'
                        },
                        model: {

                        },
                        routes: {
                            '/contentsManager': 'contentmgr.html',
                            '/contentsave': 'contentsave.html',
                            '/register': 'register.html',
                            '/createorder': 'createorder.html'
                        },
                        register() {
                            this.navigate('/register')
                        }
                    })
                    calo.makePlugin(calo.refs.tree, pluginTree)
                    console.log(window.screen.availHeight, "|", window.screen.height)
                })

        })
    </script>
</body>

</html>